<template>
	<view class="container">
		<!-- <image src="/icon/bgImg.png" mode='aspectFit|aspectFill|widthFix' /> -->
		<view class="container-content">
			<view class="container-content_header" :style="{ 'padding-top': `${paddingTop}px` }">
				<view class="header-back" @click="$goPath(1)">
					<image src="/static/icon/back.png" mode="aspectFit|aspectFill|widthFix" />
				</view>
				<view class="search">
					<view style="width: 700rpx;" @click="$goPath(2, '/pages/premiumBag/goods/search?type=1')">
						<u-search placeholder="请输入你想搜索的内容" :showAction="false" bgColor="#fff"></u-search>
					</view>
				</view>
				<view class="header-titles">
					<view class="header-title_1">潮流时尚新品发布</view>
					<view class="header-title_2">新品限时抢购</view>
					<view class="header-title_logo">
						<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/logo.png"
							mode="aspectFit|aspectFill|widthFix" />
					</view>
				</view>
			</view>
		</view>
		<view class="container-footer">
			<view class="container-footer_title">
				<view>新品专区</view>
				<view></view>
			</view>
			<block v-for="(item, index) in shopList" :key="index">
				<view class="collection-item" @click="$goPath(2,`/pages/premiumBag/goods/goodsDetail?productId=${item.id}`)">
					<view class="collection-item-imgs">
						<image :src="item.thumbnail" mode="aspectFill" />
					</view>
					<view class="collection-item-body">
						<view class="collection-item__upper">
							<view class="collection-item__title">{{ item.name }}</view>
						</view>
						<view class="collection-item__down">
							<view>￥<text>{{ item.showPrice }}</text></view>
							<view class="collection-item__down_icon" @click="onCollect(item)">
								<u-icon :name="item.collect == 1 ? 'heart-fill' : 'heart'" size="40rpx"
									:color="item.collect == 1 ? '#EA5F5F' : '#BFBFBF'" />
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/common/auth';

	export default {
		data() {
			return {
				userId: getUserInfo().ypdUser?.userId,
				paddingTop: 0,
				isCollect: false,
				shopList: [],
				page: {
					current: 1,
					size: 20
				}
			}
		},
		onShow() {
			let app = uni.getSystemInfoSync()
			this.paddingTop = app.statusBarHeight
			this.getfindByPage();

		},
		methods: {
			async getfindByPage() {
				const {
					userId,
					page
				} = this;
				const param = {
					page,
					query: {
						userId,
						isNew: 1,
					},
				};
				let result = await this.$request.miniFindByPage(param)
				const {
					records
				} = result.data;
				this.shopList = records
			},
			//收藏
			onCollect(item) {
				const {
					userId
				} = this;
				if (!userId) return this.$toast('您还未登录，请先去登录!')
				const param = {
					productUpId: item.id,
					userId
				}
				if (item.collect == 0 || item.collect == null) {
					this.$request.miniAddCollet(param).then(res => {
						if (res.code == 200) {
							this.getfindByPage()
							this.$toast('收藏成功!')
						}
					});
				} else {
					this.$request.miniCancelCollet(param).then(res => {
						if (res.code == 200) {
							this.getfindByPage()
							this.$toast('取消收藏成功!')
						}
					});
				}
			},
		},
	}
</script>
<style scoped>
	.container {
		height: 100%;
		background-color: #A5E4CC;
	}

	.container-content {
		width: 100%;
		height: 725rpx;
		background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/1b4b8669-77cd-4f23-8bae-619d8aebea9f.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.container-content_header {
		padding: 0 24rpx;
	}

	.header-back {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 20rpx;
	}

	.header-back image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.search .t-search__input-container {
		border-radius: 32rpx !important;
		height: 64rpx !important;
	}

	.search .t-search__input {
		font-size: 28rpx !important;
		color: #666666 !important;
		font-size: 30rpx !important;
		font-weight: bold;
	}

	.header-titles {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header-title_1 {
		font-size: 48rpx;
		color: #333;
		font-weight: bold;
		line-height: 56rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.header-title_2 {
		width: 232rpx;
		line-height: 36rpx;
		text-align: center;
		background: #333333;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		font-size: 24rpx;
		color: #fff;
		margin: 20rpx 0 48rpx;
	}

	.header-title_logo {
		width: 220rpx;
		height: 60rpx;
	}

	.header-title_logo image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.container-footer {
		flex: 1;
		background-color: #A5E4CC;
		padding: 28rpx 56rpx;
	}

	.container-footer_title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin-bottom: 24rpx;
	}

	.container-footer_title>view:first-child {
		width: 420rpx;
		line-height: 72rpx;
		background: linear-gradient(270deg, rgba(89, 189, 153, 0) 0%, #4CC59A 22%, #52B793 52%, #4CC59A 80%, rgba(100, 194, 160, 0) 100%);
		text-align: center;
	}

	.container-footer_title>view:last-child {
		width: 420rpx;
		height: 4rpx;
		background: linear-gradient(270deg, rgba(173, 238, 217, 0) 0%, #CAFFEF 22%, #CAFFEF 52%, #CBFFF0 80%, rgba(203, 255, 240, 0) 100%);
	}

	.collection-item {
		width: 100%;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.collection-item-imgs {
		flex-shrink: 0;
		width: 200rpx;
		height: 200rpx;
	}

	.collection-item-imgs:empty {
		display: none;
		margin: 0;
	}

	.collection-item-imgs image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 16rpx 16rpx;
		overflow: hidden;
	}

	.collection-item-body {
		flex: 1;
		height: 200rpx;
		padding: 16rpx 24rpx 18rpx;
		display: flex;
		flex-direction: column;
	}

	.collection-item__upper {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		flex: 1;
	}

	.collection-item__title {
		flex-shrink: 0;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		display: -webkit-box;
		height: 72rpx;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-word;
		line-height: 36rpx;
	}

	.collection-item__tags {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 8rpx 0 0 0;
	}

	.collection-item__tag {
		color: #999999;
		background: transparent;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		border-right: 1rpx solid #999999;
		padding: 0 4rpx;
		border-radius: 4rpx;
		line-height: 30rpx;
	}

	.collection-item__tag:last-child {
		border: 0;
	}

	.collection-item__down {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
	}


	.collection-item__down>view:first-child {
		font-size: 40rpx;
		color: #EA5F5F;
	}

	.collection-item__down .collection-item__down_icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>